import React, { useEffect, useState } from 'react'

// 导入搜索导航栏组件
import SearchHeader from '../../components/SearchHeader'
import Filter from './components/Filter'
import HouseItem from '../../components/HouseItem'

// 导入吸顶组件
import Sticky from '../../components/Sticky'
import NoHouse from '../../components/NoHouse'

import { NavBar, Skeleton, Toast } from 'antd-mobile'

import { AutoSizer, InfiniteLoader, List, WindowScroller } from 'react-virtualized'

import { API, BASE_URL, getCity } from '../../utils'

// 导入样式
import './index.scss'

// 获取当前定位城市信息
/* const { label, value } = JSON.parse(
  localStorage.getItem('hkzf_city') || '{"label":"广州","value":"AREA|e4940177-c04c-383d"}'
) */

export default function HouseList(props) {
  // 获取当前定位城市信息
  const { label, value } = getCity()
  // 接收 Filter 组件中的筛选条件数据
  let filterData = {}
  // 列表数据
  const [list, setList] = useState([])
  // 总条数
  const [count, setCount] = useState(0)
  // 数据是否加载中
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    searchHouseList()
    return () => {
      setList([])
      setCount(0)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // 用来获取房屋数据列表数据
  const searchHouseList = async () => {
    // 开启 loading
    setIsLoading(true)
    Toast.show({ icon: 'loading', content: '加载中…', duration: 0 })
    // 获取当前定位城市id
    // const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
    const { data: res } = await API.get('/houses', {
      params: {
        cityId: value,
        ...filterData,
        start: 1,
        end: 20
      }
    })
    const { list, count } = res.body

    // 关闭 loading
    setIsLoading(false)
    Toast.clear()
    // 提示房源数量
    if (count !== 0) Toast.show({ content: `共找到 ${count} 套房源` })

    setList(list)
    setCount(count)
  }

  // 获取子组件中的 filters 数据
  const onFilter = filters => {
    // 返回页面顶部
    window.scrollTo(0, 0)
    filterData = filters
    // 调用获取房屋数据的方法
    searchHouseList()
  }

  // 渲染房屋列表
  const renderHouseLists = ({ key, index, style }) => {
    // 根据索引号获取当前这一行的房屋数据
    const house = list[index]

    // 判断 house 是否存在
    // 如果不存在，就渲染 loading 元素占位
    if (!house) {
      return (
        <div className="loading" key={key} style={style}>
          <Skeleton animated className="customSkeleton" />
        </div>
      )
    }

    return (
      <HouseItem
        key={key}
        style={style}
        houseCode={house.houseCode}
        src={BASE_URL + house.houseImg}
        title={house.title}
        desc={house.desc}
        tags={house.tags}
        price={house.price}
        onClick={() => props.history.push(`/detail/${house.houseCode}`)}
      />
    )
  }

  // 判断列表中的每一行是否加载完成
  const isRowLoaded = ({ index }) => {
    return !!list[index]
  }

  // 用来获取更多房屋列表数据
  // 注：改方法的返回值是一个 Promise 对象，并且，这个对象应该在数据加载完毕时，来调用 resolve 让 Promise 对象的状态变为已完成
  const loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise(async resolve => {
      const { data: res } = await API.get('/houses', {
        params: {
          cityId: value,
          ...filterData,
          start: startIndex,
          end: stopIndex
        }
      })
      setList([...list, ...res.body.list])

      // 数据加载完成时，调用 resolve 即可
      resolve()
    })
  }

  // 渲染列表数据
  const renderList = () => {
    // 关键点：在数据加载完成后，再进行 count 的判断
    // 解决方式：如果数据加载中，则不展示 NoHouse 组件，在数据加载完成后，再展示 NoHouse 组件
    if (!count && !isLoading) return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>

    return (
      <InfiniteLoader isRowLoaded={isRowLoaded} loadMoreRows={loadMoreRows} rowCount={count}>
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {({ height, isScrolling, scrollTop }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    onRowsRendered={onRowsRendered}
                    ref={registerChild}
                    autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                    width={width} // 视口的宽度
                    height={height} // 视口的高度
                    rowCount={count} // List 列表项的行数
                    rowHeight={120} // 每一行的高度
                    rowRenderer={renderHouseLists} // 渲染列表项中的每一行
                    isScrolling={isScrolling}
                    scrollTop={scrollTop}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        )}
      </InfiniteLoader>
    )
  }

  return (
    <div className="houseList">
      {/* 头部模块 */}
      <NavBar onBack={() => props.history.go(-1)}>
        <SearchHeader cityName={label} className="searchHeader" />
      </NavBar>

      {/* 选项模块 */}
      <Sticky height={40}>
        <Filter onFilter={onFilter} />
      </Sticky>

      {/* 房屋列表 */}
      <div className="houseItems">{renderList()}</div>
    </div>
  )
}
